<template>
  <!-- 主体部分 -->
  <div style="height:100%;width:100%;">
    <div class="menu-side">
      <el-menu class="el-menu-nav"
        :default-active="activeMenu"
        :router='true'
        mode="vertical"
        background-color="rgba(0,2,34,0)"
        text-color="#aaa"
        active-text-color="#fff">
        <template v-for="menu of navMenus">
          <el-tooltip class="item" effect="dark" :content="menu.label" placement="right">
            <el-menu-item :key="menu.id" :index="menu.router" :route='menu.router'>
               <i :class="menu.icon"></i>
            </el-menu-item>
          </el-tooltip>
        </template>
      </el-menu>
    </div>

    <!-- 视图区域 -->
    <div class="view-container">
      <router-view ></router-view>
    </div>

  </div>

</template>

<script>
export default {
  name: 'Index',
  data () {
    return {
      //定义导航菜单数据
      navMenus:[
        {
          id:'nav-1',
          label:'图谱展示',
          router:'/knowledgeView',
          icon:'el-icon-s-grid'
        },
        {
          id:'nav-2',
          label:'图谱编辑',
          router:'/knowledgeEditor',
          icon:'el-icon-edit'
        },
        {
          id:'nav-3',
          label:'节点阴影效果',
          router:'/knowledgeNodeShadow',
          icon:'el-icon-box'
        }
      ]
    }
  },
  methods: {
    goto(path){
      if(path){
        this.$router.push(path);
      }
    }
  },
  created () {

  },
  computed: {
    //动态监控选中菜单
    activeMenu() {
      const route = this.$route
      const { meta, path } = route
      return path
    }
  }
}
</script>

<style scoped>
  .menu-side{
     width: 60px;
     position: fixed;
     top: 0;
     left: 0;
     bottom: 0;
     background-color: #433b60;
  }

  .view-container{
    margin-left:65px;
    height:100%;
  }

</style>
